<script setup>
import axios from "axios";
import { useRouter } from "vue-router";
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";

let username = ref();
let weight = ref();
let oldweight = ref(55);
let isedit = ref(false);

onBeforeMount(() => {
  const data = JSON.parse(localStorage.getItem("user")); //解析为JSON对象
  username.value = data.username;
  weight.value = data.weight;
  oldweight.value = data.weight;
});
const router = useRouter();
let currentName = ref(router.currentRoute.value.fullPath.split("/")[1]);

const handleif = () => {
  isedit.value = true;
};

const handleClick = () => {
  isedit.value = false;
  axios({
    method: "post",
    url: "http://localhost:4000/eidt",
    data: {
      username: username.value,
      weight: weight.value,
    },
  })
    .then((res) => {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
      oldweight.value = weight.value;
      const oldData = JSON.parse(localStorage.getItem("user")); //更新到服务器，并从localStorage中获取并更新用户的体重信息
      localStorage.setItem(
        "user",
        JSON.stringify({ ...oldData, weight: weight.value })
      );
    })
    .catch((err) => {
      ElMessage({
        message: res.data.msg,
        type: "error",
      });
    });
};
</script>

<template>
  <section
    class="banner1"
    style="
      background-image: url(./img/gerenzhuye.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    "
  ></section>
  <div class="per-xinxi">
    <div class="gerentouxiang">
      <img src="/img/gerentouxiang.png" alt="" />
      <div class="per-mingzi">{{ username }}</div>
    </div>
    <div class="per-yundongliang">
      <p style="width: 50px; margin-left: 30px">总运动</p>
      <h1 style="width: 50px; margin-left: 30px">1810</h1>
      <p style="width: 50px; margin: -40px 0 0 110px; color: gray">分钟</p>
      <p
        style="
          width: 150px;
          margin: 50px 0 0 30px;
          font-size: 14px;
          color: gray;
        "
      >
        本周消耗 0 千卡
      </p>
    </div>
    <div class="per-tizhong">
      <div>
        <p style="width: 50px; margin-left: 30px">体重</p>
        <h1 style="width: 50px; margin-left: 30px">{{ oldweight }}</h1>
        <p style="width: 50px; margin: -40px 0 0 100px; color: gray">公斤</p>
        <p
          style="
            width: 150px;
            margin: 50px 0 0 30px;
            font-size: 14px;
            color: gray;
          "
        >
          上次记录 14 天前
        </p>
      </div>
      <div class="xiugaidiv">
        <el-button type="primary" class="xiugai" @click="handleif"
          >修改体重</el-button
        >
        <input type="text" class="shuruxiugai" v-model="weight" v-if="isedit" />
        <el-button type="info" class="tijiao" @click="handleClick" v-if="isedit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
  <div class="per-kecheng">
    <div><p style="font-size: 20px; padding: 20px 0 0 20px">我的课程</p></div>
    <div class="per-part">
      <div
        class="per-part1"
        style="
          background-image: url(./img/xiangxue.png);
          background-repeat: no-repeat;
          background-size: 60%;
          background-position: center;
        "
      ></div>
      <div class="per-part2">
        <p style="margin-left: 20px; margin-top: 40px">想练</p>
        <p style="margin-left: 20px; font-size: 14px">2 节课程</p>
      </div>
      <div
        class="per-part1"
        style="
          background-image: url(./img/xilieke.png);
          background-repeat: no-repeat;
          background-size: 60%;
          background-position: center;
        "
      ></div>
      <div class="per-part2">
        <p style="margin-left: 20px; margin-top: 40px">系列课</p>
        <p style="margin-left: 20px; font-size: 14px">3 节系列课</p>
      </div>
      <div
        class="per-part1"
        style="
          background-image: url(./img/lianguo.png);
          background-repeat: no-repeat;
          background-size: 60%;
          background-position: center;
        "
      ></div>
      <div class="per-part2">
        <p style="margin-left: 20px; margin-top: 40px">练过</p>
        <p style="margin-left: 20px; font-size: 14px">0 节课程</p>
      </div>
      <div
        class="per-part1"
        style="
          background-image: url(./img/jihua.png);
          background-repeat: no-repeat;
          background-size: 60%;
          background-position: center;
        "
      ></div>
      <div class="per-part2">
        <p style="margin-left: 20px; margin-top: 40px">计划</p>
        <p style="margin-left: 20px; font-size: 14px">1 个计划</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.banner1 {
  height: 550px;
}
.per-xinxi {
  display: flex;
}
.per-mingzi {
  text-align: center;
}
.per-yundongliang {
  width: 300px;
  height: 200px;
  background-color: aliceblue;
  margin: 100px 0 0 150px;
}
.per-tizhong {
  width: 300px;
  height: 200px;
  background-color: aliceblue;
  margin: 100px 0 0 100px;
  display: flex;
}
.xiugaidiv {
  width: 120px;
  display: flex;
  flex-direction: column;
}
.shuruxiugai {
  margin-top: 50px;
}
.xiugai {
  margin-top: 20px;
}
.tijiao {
  margin-top: 20px;
}
.gerentouxiang {
  margin: 100px 0 0 100px;
}
.gerentouxiang img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.per-kecheng {
  width: 1200px;
  height: 250px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: aliceblue;
}
.per-part {
  margin-top: 10px;
  display: flex;
}
.per-part1 {
  width: 150px;
  height: 150px;
  margin-left: 20px;
  background-color: rgb(94, 19, 144);
}
.per-part2 {
  width: 150px;
  height: 150px;
}
</style>
